<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<base th:href="@{/}">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>左侧导航</title>
    <div th:insert="~{common::header}"></div>
    <link rel="stylesheet" th:href="@{/css/nav.css}">
    <style>
        body, html{
          overflow-y: auto;
          overflow-x: hidden;
          background-color: #fff;
        }
        .switchDiv{
            height: 43px;
            line-height: 43px;
            text-align: center;
            font-style: normal;
            font-size: var(--main-desktop-font-MidSize);
            right: 0;
            background-color: #78808e;
            border-left: solid 1px #646c7c;
            width: 40px;
            color: var(--main-darkMode-text-color);
            font-weight: normal;
            cursor: pointer;
            display: none;
        }
        .asideClose .switchDiv{
            display: inline-block;
            position:fixed;
            top:75px;
            left:0;
            z-index: 10;
        }
    </style>
</head>
<body>
<nav class="sidebar" id="sidebar">
    <ul class="nav" id="nav">

        <li class="nav-item home">
            <i class="mdi mdi-home-variant menu-icon"></i>
            <a target="_parent" class="nav-link menu-title" th:href="@{/}">
                返回首页
            </a>
            <i class="mdi mdi-chevron-double-left menu-icon switchDiv" id="switchDiv"><<</i>
        </li>
        <li class="nav-item title">
            <h2><a target="mainFrame" th:text="#{app.name}" class="nav-link" th:href="@{/login/dashboard}">lucky业务系统</a></h2>
        </li>
        <li class="nav-item" th:each="li, item : ${navTreeList}" th:if="${li.rightType == '2'}">
            <i class="menu-icon"><span class="menu-num" th:text="${item.index + 1}"></span></i>
            <a target="mainFrame" class="nav-link menu-title" th:href="${li.url}" data-bs-toggle="collapse" aria-expanded="false" aria-controls="ui-form">
                [[${li.rightName}]]
                <i class="mdi mdi-menu-down menu-icon"></i>
            </a>
            <ul th:if="${#lists.size(li.childList)>0}" class="sub-menu">
                <li th:each="ii,item : ${li.childList}" class="nav-item"  th:if="${ii.rightType == '2'}">

                    <a th:href="${ii.url}" target="mainFrame" class="nav-link"  href="">
                        [[${ii.rightName}]]
                        <i class="mdi mdi-menu-right menu-icon"></i>
                    </a>
                    <ul th:if="${#lists.size(ii.childList)>0}" class="sub-menu">
                        <li th:each="iii,item : ${ii.childList}" class="nav-item ml-0"   th:if="${iii.rightType == '2'}">
                            <a target="mainFrame" class="nav-link pl-0" th:href="${iii.url}">[[${iii.rightName}]]</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>
</body>
<script type="text/javascript">
    let LayoutController=function(selector){
        this.element = $(selector).get(0)
        this.element = top.document.body
        this.init();
    };
    LayoutController.prototype.init=function(){
        let self = this;
        this.asideSwitch = $("#switchDiv").get(0)
        $(this.asideSwitch).bind("click",function(event){self.asideSwitchClickHandle(event)});
        if($(top.document).find(".switchDiv")){
            $(top.document).find(".switchDiv").bind("click",function(event){self.asideSwitchClickHandle(event)});
        }
    }
    LayoutController.prototype.type = "leftAside"
    LayoutController.prototype.aisdeStatus = "open"
    LayoutController.prototype.asideSwitchClickHandle = function(){
        this.switchAside();
    }
    LayoutController.prototype.switchAside=function(){
        if(this.aisdeStatus === "open"){
            this.aisdeStatus = "close"
        }else{
            this.aisdeStatus = "open"
            $("#asideSwitch").attr("title","收起左侧菜单");
        }
        this.update();
    }
    LayoutController.prototype.update=function(){
        $(this.element).removeClass("asideClose")
        if(this.aisdeStatus === "close"){
            $(this.element).addClass("asideClose")
            $("#asideSwitch").attr("title","展开左侧菜单");
        }
    }
    let Nav=function(options){
        this.init(options);
    }
    Nav.prototype.init=function(options){
        let self=this;
        this.options = $.extend(self.getDefaultOptions(),options);
        this.element = $("#nav").get(0);
        this.aList = $(this.element).find("a");
        for(let i=0; i<this.aList.length; i++){
            let aele = this.aList.eq(i);
            if(!!aele.next("ul") && aele.next("ul").hasClass("open")){
                aele.data("click",true);
            }

        }
        this.aList.bind("click",function(event){
            return self.clickHandle(event);
        })
        $("i").not("#switchDiv").bind("click",function(event){
            event.stopPropagation();
            $(this).parent("a").click();
            return false;
        })
        let layoutController = new LayoutController();
    }
    Nav.prototype.getDefaultOptions = function(){
        let options = {
            onlyOneOpen:false,//是否只有一条树开关
        }
        return options;
    }
    Nav.prototype.changeActive = function(ele){
        $(this.element).find("a.active").removeClass("active")
        ele.addClass("active")
    }
    Nav.prototype.clickHandle = function(event){
        let self=this;
        let ele=$(event.target);
        if(self.isDeeppestEle(ele)){
            self.changeActive(ele);
            return true;
        }
        if(ele.data("click") === true){
            self.switchAction(ele,false,self.options.onlyOneOpen);
            return false;
        }
        if(self.options.onlyOneOpen)
            self.closeAll();
        ele.data("click",true);
        if(ele.next("ul").find("li").length>0){
            self.switchAction(ele,true,self.options.onlyOneOpen);
            return false;
        }
        return false;
    }
    Nav.prototype.isDeeppestEle = function(ele){
        let a=!ele.next("ul").find("li").length>0;
        console.log(a);
        return a;
    }
    Nav.prototype.closeAll = function(){
        let self = this;
        for(let i=0;i<self.aList.length;i++){
            if(self.aList.eq(i).data("click") === true){
                self.switchAction(self.aList.eq(i),false)
            }
        }
    }
    Nav.prototype.switchAction = function(ele,bol,deep){
        let self=this;
        if(bol){
            ele.data("click",true);
            ele.next("ul").addClass("open");
            if(ele.parent("li").parent("ul").hasClass("sub-menu")&&deep){
                self.switchAction(ele.parent("li").parent("ul").prev("a"),true,true)
            }
        }else{
            ele.data("click",false);
            ele.next("ul").removeClass("open");
            if(deep && ele.next("ul")){
                try {
                    for (let i = 0; i < ele.next("ul").children("li").length; i++) {
                        self.switchAction(ele.next("ul").children("li").children("a").eq(0), false, true)
                    }
                } catch (e) {
                    console.log(e);
                }
            }
        }
    }
    let nav=new Nav();
</script>
</html>
